<template>
  <div>
    <!-- 底部二维码和备案号 -->
    <!-- el-container外层容器   el-header顶栏容器（最上层）   el-main主要区域容器（）-->
    <el-container>
      <!-- 二维码 样式名为second -->
      <el-header style="height: 230px" class="second"><el-row>
        <el-col
          :span="8"
          v-for="(o, index) in 3"
          :key="o"
          :offset="index > 0 ? 3 : 0"
        >
          <el-card style="width:300px">
            <img
              src="../image/beijing2.gif"
              class="images"
            />
            <div style="padding: 10px">
              <span>扫码加入我们</span>
            </div>
          </el-card>
        </el-col>
      </el-row></el-header>
      
      <!-- 备案号 样式名为record -->
      <el-main class="record">
        <el-link type="warning">ICP备案号</el-link>
        &nbsp;|&nbsp;
        <el-link type="warning">公安备案号</el-link>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "bah",
};
</script>

<style scoped>
img {
  /*设置图片宽度和浏览器宽度一致*/
  width: 100%;
  height: inherit;
}

/* 二维码的样式 */
.second {
  width: 1500px;
  height: 500px;
  background-color: beige;
  margin-left: 10px;
}

/* 二维码的图片 */
.images {
    display: block;
  }

/* 备案号的样式 */
.record {
  width: 1500px;
  background-color: floralwhite;
  margin-left: 10px;
  text-align: center;
}

.el-row{
  display: flex;
}
</style>